import { Component } from 'react'
import './TodoForm.css'

class TodoForm extends Component {
    constructor(props) {
        super(props)
        //私有
        this.state = {
            inputText:''
        }
    }

    handleChange = (event) => {
        this.setState({
            inputText: event.target.value
        })
    }

    handleSubmit = (event) => {
        event.preventDefault() 
        if(this.state.inputText.trim()){
            this.props.addTodo(this.state.inputText)
                this.setState({
                    inputText:''
                });
        }
    }

    render() {
        return(
            <form className='todo-Form' onSubmit={this.handleSubmit}>
                <input 
                    type = "text"
                    value = {this.state.inputText}
                    className="todo-form__input"
                    onChange={this.handleChange}
                    placeholder="请输入待办事项"
                />
                <button type='submit' className='todo-form__button'>Add</button>
            </form>
        )
    }
}

export default TodoForm